<template>
  <div id="topbar" :style="{ width: topWidth }">
    <div id="menu" :style="{background: theme.topbar}">
      <div class="left" style="display: flex">
        <i
          class="el-icon-s-fold"
          @click="visibleMenu"
          v-if="menuOpen && usersetting.showMenuButton"
        ></i>
        <i
          class="el-icon-s-unfold"
          @click="visibleMenu"
          v-if="!menuOpen && usersetting.showMenuButton"
        ></i>
        <Breadcrumb v-if="usersetting.showCrumbs"></Breadcrumb>
      </div>
      <div class="right">
        <!-- 放大屏幕 -->
        <div class="screen" @click="fullScreen" v-if="!isFullScreen">
          <i class="el-icon-full-screen"></i>
        </div>
        <!-- 缩小屏幕 -->
        <div class="screen" @click="exitScreen" v-else>
          <i class="el-icon-remove-outline"></i>
        </div>
        <div class="user">
          <el-dropdown>
            <!-- 头像 姓名 -->
            <div class="userstatus">
              <img
                class="cover"
                :src="userInfo.circleUrl"
                style="float: left"
                v-if="usersetting.showAvatar"
              />
              <span class="name">{{ userInfo.username }}</span>
            </div>
            <!-- 下拉选项 -->
            <el-dropdown-menu>
              <el-dropdown-item>
                <i class="el-icon-user"></i>
                <span class="menu-txt" @click="gouser()">个人中心</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-switch-button"></i>
                <span class="menu-txt" @click="loginout">退出登录</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-lock"></i>
                <span class="menu-txt" @click="()=>{this.$emit('openDialog')}">所持权限</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="shezhi" @click="openSetting">
          <i class="el-icon-s-tools"></i>
        </div>
      </div>
    </div>
    <!-- 标签插槽 -->
    <slot></slot>
  </div>
</template>

<script>
import themesetting from '../../plugins/setting'
import { fullScreen, exitScreen } from "../../utils/utils";
import { mapState } from "vuex";
import { gethead } from "../../Api/login";
import PersonalAuthority from "../../components/RightsManagement/PersonalAuthority";
export default {
  name: "TopBar",
  props: {
    menuOpen: Boolean,
  },
  components: {
    PersonalAuthority,
  },
  computed: {
    topWidth() {
      return this.menuOpen ? `calc(100% - 250px)` : `calc(100% - 70px)`;
    },
    ...mapState({
      usersetting: (state) => state.usersetting.setting,
    }),
  },
  data() {
    return {
      // thememenucolor: '#5DADFF',
      // 是否全屏
      isFullScreen: false,
      theme: {}, // 导航主题
      // 个性设置弹出框
      drawer: false,
      // 用户信息
      userInfo: {
        // 头像
        circleUrl:
          "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        // 姓名
        username: "未登录",
      },
      authorityVisible: false,
    };
  },
  watch: {
    'usersetting.theme': {
      handler() {
        this.getTheme()
      }
    }
  },
  created() {
    this.getuserinfo();
    this.getTheme()
  },
  mounted() {
    document.addEventListener("click", this.bodyCloseNotice);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.bodyCloseNotice);
  },
  methods: {
    // 获取信息
    async getuserinfo() {
      gethead().then((res) => {
        if (res.data.statusCode === 20000) {
          const { username } = res.data.data;
          this.userInfo.username = username;
        }
      });
    },
    // 全屏
    fullScreen() {
      fullScreen();
      this.isFullScreen = true;
    },
    // 退出全屏
    exitScreen() {
      exitScreen();
      this.isFullScreen = false;
    },
    // 左侧菜单展开|缩小
    visibleMenu() {
      this.$emit("click");
    },
    // 打开个性化设置
    openSetting() {
      this.$emit("personalityShow");
    },
    // 跳转到个人中心
    gouser() {
      this.$router.push("/User/PersonalCenter");
    },
    // 退出登录
    loginout() {
      localStorage.removeItem("token");
      window.__permissionList = undefined;
      window._onelevel = {};
      window._twolevel = {};
      window._threelevel = {};
      window._fourlevel = {};
      this.$router.push("/login");
      this.$message.info("您已退出登录");
    },
    // 获取主题设置
    // 初始化用户设置 ||  获取最新设置
    getTheme() {
      let that = JSON.parse(localStorage.getItem('usersetting'))
      this.theme = that.theme
      let a = themesetting.themeList.filter((item) => {
        return item.theme === that.theme
      })
      this.theme = a[0]
      setTimeout(() => {
        switch(this.theme.menuLeftBc) {
          case '#191A23':
            document.getElementById('topbar').style.setProperty('--hover-color','#66676A')
            break;
          case '#ffffff':
            document.getElementById('topbar').style.setProperty('--hover-color','#9ECEFF')
            break;
          case '#087DF5':
            document.getElementById('topbar').style.setProperty('--hover-color','#9ECEFF')
            break;
      }
      },100)
    },
  },
};
</script>

<style lang="scss" scoped>

#topbar {
  $menu-color:var(--theme-menu-color,#5DADFF);
  $hover-color: var(--hover-color,#9ECEFF);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease-in-out;
  background: $default-background;
  background: transparent !important;

  #menu {
    height: 60px;
    line-height: 60px;
    // background: $theme-menu-color;
    color: #eee;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    .left {
      line-height: 60px;

      i {
        display: inline-block;
        width: 50px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 16px;

        &:hover {
          background: $hover-color;
        }
      }

      .el-route {
        line-height: 60px;
        margin-left: 10px;
      }
    }

    .right {
      display: flex;

      .screen {
        cursor: pointer;
        padding: 0 15px;
        transition: background-color 0.3s;

        i {
          // color: #777;
          font-size: 20px;
        }

        &:hover {
          background: $hover-color;
        }
      }

      .notice {
        cursor: pointer;
        padding: 0 15px;
        transition: background-color 0.3s;
        position: relative;

        i {
          color: #777;
          font-size: 17px;
        }

        .count {
          display: block;
          width: 6px;
          height: 6px;
          background: red;
          border-radius: 50%;
          position: absolute;
          top: 20px;
          right: 15px;
        }

        &:hover {
          background: $hover-color;
          color: black;
        }
      }

      .user {
        height: 60px;
        line-height: 60px;
        display: flex;
        padding: 0 10px;
        transition: background-color 0.3s;

        &:hover {
          background: $hover-color;
        }

        &:hover ul {
          height: 80px;
        }

        .cover {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background: #eee;
          margin: 15px 10px 0 0;
          overflow: hidden;
          cursor: pointer;
        }

        .name {
          font-size: 13px;
          cursor: pointer;
        }
      }

      .shezhi {
        width: 45px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s;

        i {
          font-size: 16px;
        }

        &:hover {
          background: $hover-color;
        }
      }

      .userstatus {
        color: white;
      }
    }
  }
}
</style>